<template>
  <div class="container" style="margin-bottom: 5px;height: 19vw">
    <img class="avatar" :src="historyItem.avatar"/>
    <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start">
      <span class="title" v-text="historyItem.title"></span>
      <span class="time" v-text="historyItem.time"></span>
    </div>
    <div style="flex: 1"></div>
    <span class="money-default" :class="{'money-primary':isIncome}" style="margin-right: 10px"
          v-text="historyItem.money"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'item-withdraw-history',

    data() {
      return {
        historyItem: {
          // historyId: this.historyId,
          avatar: this.avatar,
          title: this.title,
          time: this.time,
          money: this.money
        }
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      // historyId: {
      //   type: String,
      //   default: 'null',
      //   required: true
      // },
      avatar: {
        type: String,
        default: 'null',
        required: true
      },
      title: {
        type: String,
        default: 'null',
        required: true
      },
      time: {
        type: String,
        default: 'null',
        required: true
      },
      money: {
        type: String,
        default: 'null',
        required: true
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      }
    },
    computed: {
      isIncome() {
        return !this.historyItem.money.startsWith('-');
      }
    },
    watch: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .container
    flex-x()
    background-color white
    width vw(345)
    border-radius vw(5)

  .avatar
    width 5vw
    border-radius(7vw)
    margin-left 10px
    margin-right 10px

  .title
    word-big()

  .time
    margin-top 1vw
    font-size word14
    color third-ash

  .money-default
    font-size 5.3vw
    color first-ash

  .money-primary
    color main-color
</style>
